<template>
    <panel>

        <span slot="title">
             内容管理
        </span>

        <div slot="body">
            <div class="row">
                <div class="col-md-12">

                    <form :name="formName" class="form-horizontal" data-toggle="jsvalidator">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">标题</label>
                            <div class="col-sm-10"><input class="form-control" name="title" type="text" placeholder="输入标题" :value="news.title||''" /></div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">内容</label>
                            <!-- 加载编辑器的容器 -->
                            <div class="col-sm-10">
                                <script id="container" name="content" type="text/plain">
                                </script>
                            </div>
                        </div>

                        <input class="button pull-right" type="submit" value="提交" />
                    </form>
                </div>
            </div>
        </div>


        <div slot="extras">
        </div>
    </panel>

</template>

<script>

    export default {
        mounted() {
            let newsId = this.$route.params.id;
            if (newsId) {
                this.newsId = newsId;
                this.formName = 'news.updation';

                axios.get('./data/' + newsId).then((ret) => {
                    const msg = ret.data;

                    this.news = msg.data;

                    this.ue = UE.getEditor('container', {
                        autoHeightEnabled: true
                    });

                    this.ue.ready(() => {
                        this.ue.setContent(this.news.content);
                    });

                });

            } else {
                this.ue = UE.getEditor('container', {
                    autoHeightEnabled: true
                });
            }



            $('form', this.$el).on('jsvalidator.ok', (e) => {
                this.onSubmit();
            });
        },
        destroyed() {
            this.ue.destroy();
        },
        data() {
            return {
                news: {},
                formName: 'news.creation'
            }
        },
        methods: {
            onSubmit() {
                let obj = $('form', this.$el).serializeJSON();

                let url = './data';
                if (this.newsId) {
                    url += '/' + this.newsId;
                }

                axios.post('./data', obj).then((ret) => {
                    const msg = ret.data;


                    if (msg.code === 422) {
                        $.addErrorStates(form, msg.data.errors);
                        return apperror(msg.msg);
                    } else if (msg.code > 0) {
                        return apperror(msg.msg);
                    }

                    location.href = '/admin/news/#/';
                });
            }
        }
    }
</script>
